<template>
  <view class="c_container">
    <view class="c_header">
      <view class="car_box">
        <view style="padding: 20rpx;display: flex;flex-direction: column;justify-content: space-around;height: 100%;">
      	  <view class="cb_head">
      	    <view class="cb_left">
      	      <text class="x_amount"
      	            style="margin-right: 20rpx;">卡号:</text>
      	      <text class="x_amount">{{walletObj.cardNo}}</text>
      	    </view>
      	  </view>
      	  <view class="cb_left">
      	    <text class="x_amount"
      	          style="margin-right: 20rpx;">所在机构:</text>
      	    <text class="x_amount">{{stuObj.orgName}}</text>
      	  </view>
      	  <view style="line-height: 40rpx;">
      	    <text class="x_amount"
      	          style="margin-right: 30rpx;">{{stuObj.deptName}}</text>
      	    <text class="x_amount"
      	          style="margin-right: 30rpx;">{{stuObj.major == null ? '' : stuObj.major}}</text>
      	    <text class="x_amount">{{stuObj.empName}}</text>
      	  </view>
		  <view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
			  <text class="x_amount">{{walletObj.walletTypeDesc}}余额：<text style="font-weight: 600;">{{Number(walletObj.balance).toFixed(2)}}</text></text>
			  <text class="x_recode"
			        @click="jumpRecode">充值记录</text>
		  </view>
      	  
        </view>
      </view>
    </view>
    
    <view class="in_boxs">
      <view class="am_box">
        <text class="am_txt">充值金额：</text>
        <input type="digit"
               v-model="tranAmt"
               placeholder-class="account-txt"
               class="recharge_box"
               placeholder="请输入充值金额" />
      </view>
    </view>
	<!-- #ifndef APP-PLUS -->
    <view style="display: flex;justify-content: center;align-items: center;background-color: #FFFFFF;padding-top: 100rpx;">
		<button form-type="submit"
			  type="primary"
			  class="btn_pri"
			  @click="wxCZ">
			  <!--  -->
			  <!-- #ifdef MP-WEIXIN -->
			  微信支付
			  <!-- #endif -->
			  <!-- #ifdef H5 -->
			  微信支付
			  <!-- #endif -->
			  <!-- #ifdef MP-ALIPAY -->
			  支付宝支付
			  <!-- #endif -->
		</button>
    </view>
	<!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view class="app_box">
      <view class="app_box_item">
        <view style="text-align: center;">
          <text>支付方式</text>
        </view>
        <view class="app_box_items">
          <radio-group @change="radioChange">
            <view class="app_box_top"
                  v-for="(item, index) in list"
                  :key="index">
              <view class="app_box_middle">
                <image style="width: 50rpx;height: 50rpx;"
                       :src="item.channelName == '微信' ? '/static/images/home/weixin.png' : '/static/images/home/alipay.png'"></image>
                <text style="margin-left: 20rpx;">{{item.channelName}}</text>
              </view>
              <label class="radio">
                <radio :value="item.channelId"
                       :checked="radioIndex == item.channelId" /></label>
            </view>
          </radio-group>
        </view>
        <button type="primary"
                class="btn_pri"
                style="background-color: #477EDA;"
                @click="pay">确认支付</button>
      </view>
    </view>
    <!-- #endif -->
	<mcModal ref="mcModal" :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
  </view>
</template>

<script>
let _that;
import {commonPay, XK_MODE, _pay, appPayList} from '../../common/utils/pay_center.js'
import {_showLoading, _showToast} from '../../common/js/util.js'
import mcModal from '../../components/custom-modal/custom-modal.vue'
export default {
  onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
	_that = this
    this.walletObj = { ...JSON.parse(decodeURIComponent(option.objParams)) }
    this.stuObj = { ...JSON.parse(decodeURIComponent(option.stuObj)) }
  },
  data() {
    return {
      walletObj: {},
      stuObj: {},
      tranAmt: '',
      radioIndex: 0,
      radioName: '微信',
      list: [],
	  content: '',
	  title: '',
	  showMcModal: false,
	  okBtn: '',
	  isApp: false
    }
  },
  onShow: function () {
    // #ifdef APP-PLUS
    this.getPayList()
    // #endif
  },
  components: {
	  mcModal
  },
  methods: {
		bb() {},
		cc() {},
		_showModal(option){
			this.title = option.title
			this.content = option.content
			this.showMcModal = true
			this.okBtn = '确认支付'
			this.cc = ()=>{
				this.showMcModal = false
				option.confirm()
			}
			this.bb = ()=>{
				this.showMcModal = false
				option.cancel()
			}
		},
	  cc() {
		  this.showMcModal = false
		  if(this.isApp) {
			  let channelId = this.list.filter(item => item.channelName === this.radioName)[0].channelId
			  _pay(this.tranAmt, this.walletObj, channelId, this)
		  } else {
			  let _this = this
			  // #ifdef MP-WEIXIN
			  wx.requestSubscribeMessage({
			  	tmplIds: ['zZygSFbCHBCnaXjCYH4pSFpkccKCVNfL_WeAd58-WDY'],
			  	success (res) {
			  		commonPay(XK_MODE, _this.walletObj)(_this.tranAmt, _this)
			  	},
			  	fail(err) {
			  		console.log(err)
			  	}
			  })
			  // #endif
			  // #ifdef H5
			  commonPay(XK_MODE, _this.walletObj)(_this.tranAmt)
			  // #endif
			  // #ifdef MP-ALIPAY
			  commonPay(XK_MODE, _this.walletObj)(_this.tranAmt)
			  // #endif
		  }
	  },
    pay() {
      if (this.tranAmt == '') {
		_showToast('请输入充值金额')
      } else {
		  if(this.radioName !== '支付宝' && this.radioName !== '微信') {
			  _showToast('暂不支持该支付渠道支付')
		  } else {
			this._showModal({
				title: '确认支付',
				content: `本次支付的金额为：${this.tranAmt} 元`,
				confirm: function (){
					let channelId = _that.radioIndex
					_pay(_that.tranAmt, _that.walletObj, channelId, _that)
				},
				cancel: function(){
					 _that.tranAmt = ''
				}
			})
		  }
		}
    },
    radioChange(evt) {
     	this.radioIndex = evt.detail.value
     	this.radioName = _that.list.filter(item => item.channelId === evt.detail.value)[0].channelName
    },
    getPayList() {
	  _showLoading('加载中,请稍后…')
	  let payList = appPayList(XK_MODE, this.walletObj)(this.tranAmt)
	  payList.then(res => {
		  this.list = res
		  this.radioChange({detail:{value: res[0].channelId}})
	  })
    },
    jumpRecode() {
      uni.navigateTo({
        url: '../recode/rechargeRecode?walletObj=' + encodeURIComponent(JSON.stringify(this.walletObj))
      })
    },
    wxCZ(e) {
		if (this.tranAmt == '') {
		_showToast('请输入充值金额')
		} else {
			let _thar = this
			this._showModal({
				title: '确认支付',
				content: `本次支付的金额为：${this.tranAmt} 元`,
				confirm: function (){
					// #ifdef MP-WEIXIN
					wx.requestSubscribeMessage({
						tmplIds: ['zZygSFbCHBCnaXjCYH4pSFpkccKCVNfL_WeAd58-WDY'],
						success (res) {
							commonPay(XK_MODE, _thar.walletObj)(_thar.tranAmt, _thar)
						},
						fail(err) {
							console.log(err)
						}
					})
					// #endif
					// #ifdef H5
					commonPay(XK_MODE, _thar.walletObj)(_thar.tranAmt, _thar)
					// #endif
					// #ifdef MP-ALIPAY
					commonPay(XK_MODE, _thar.walletObj)(_thar.tranAmt, _thar)
					// #endif
				},
				cancel: function(){
					 _thar.tranAmt = ''
				}
			})
		}
    }
  }
}
</script>

<style>
.c_container {
  height: 100%;
  position: relative;
}
.c_header {
  width: 100vw;
  height: 390rpx;
  background-image: url('');
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  position: relative;
}
.app_box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  padding-top: 30rpx;
}
.app_box_item {
  width: 100%;
  padding: 0 50rpx 50rpx 50rpx;
}
.app_box_items {
  display: flex;
  flex-direction: column;
}
.app_box_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.app_box_top:last-child {
  margin-bottom: 0;
}
.app_box_middle {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.btn_pri {
  border-radius: 30rpx;
  margin-top: 60rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  width: 70%;
  font-size: 30rpx;
  color: #ffffff;
  background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
  box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
  border-radius: 8rpx;
}
.mh_img {
  width: 100%;
  height: 100%;
}
.cb_head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}
.cb_left {
  display: flex;
  flex-direction: row;
}
.x_amount {
  font-size: 30rpx;
  font-family: "PingFang-SC-Medium, PingFang-SC";
  font-weight: 500;
  color: #6B707A;
}
.x_recode {
	background: #FFFFFF;
	border-radius: 26rpx;
	border: 1px solid #185AFF;
    font-size: 28rpx;
  font-family: "PingFang-SC-Medium, PingFang-SC";
  font-weight: 500;
  color: #185AFF;
  padding: 8rpx 20rpx;
}
.car_box {
  border-top-right-radius: 8rpx;
  border-top-left-radius: 8rpx;
  display: flex;
  flex-direction: column;
  width: 92%;
  position: absolute;
  bottom: 0;
  left: 4%;
background: linear-gradient(180deg, #F9FCFF 0%, #EDEFFF 100%);
  border-bottom: 0;
}
.uni-input {
  border: 1rpx solid rgba(0, 0, 0, 0.1);
  padding: 15rpx;
  margin-top: 20rpx;
}
.recharge_box{
	margin-top: 40rpx;
	height: 100rpx;
	background: #FFFFFF;
	border-radius: 4px;
	padding: 0 24rpx;
	font-size: 40rpx;
	border: 1px solid #E6E6E6;
}
.am_txt {
  font-size: 32rpx;
  font-family: "PingFangSC-Semibold, PingFang SC";
  font-weight: 600;
  color: #333333;
  line-height: 44rpx;
}
.am_box {
  display: flex;
  flex-direction: column;
}
.in_boxs {
  padding: 70rpx;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: #ffffff;
}
.account-txt {
	font-size: 32rpx;
}
</style>
